<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/Sellerber.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/font-awesome.min.css"/>

    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/bkg_ui.css"/>

    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/js/zh-cn.js"/>

    <style>

        .add_div {
            width: 400px;
            height: 500px;
            border: solid #ccc 1px;
            margin-top: 40px;
            margin-left: 170px;
            padding-left: 20px;
        }

        .file-list {
            height: 125px;
            display: none;
            list-style-type: none;
        }

        .file-list img {
            max-width: 70px;
            vertical-align: middle;
        }

        .file-list .file-item {
            margin-bottom: 10px;
            float: left;
            margin-left: 20px;
        }

        .file-list .file-item .file-del {
            display: block;
            margin-left: 20px;
            margin-top: 5px;
            cursor: pointer;
        }
    </style>
    <script src="../../common/js/jquery.min.js"></script>
    <script src="../../common/js/jquery.validate.min.js"></script>
    <script src="../../common/js/messages_zh.js"></script>
    <script src="../../common/js/AjaxJson.js"></script>
    <script src="../../common/js/jquery.qrcode.min.js"></script>
    <script src="../../common/js/convertPinyin.js"></script>
    <script src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
</head>

<body>
<div class="page-container">
    <div style="float:left;width:80%;">
        <div class="row cl" style="margin-bottom:15px;">
            <label class="form-label col-xs-4 col-sm-1">二维码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" id="productQR" placeholder="点击右边按钮生成！" readonly>
            </div>
        </div>
        <div class="row cl" style="margin-bottom:15px;">
            <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>商品类型：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select id="productType" class="select">
					<option value="0">请选择</option>
					<option value="按摩仪">按摩仪</option>
					<option value="听诊器">听诊器</option>
					<option value="助听器">助听器</option>
					<option value="功能床">功能床</option>
					<option value="拐杖">拐杖</option>
					<option value="轮椅">轮椅</option>
				</select>
			</span>
            </div>
        </div>
        <form action="#"  id="checkForm">
            <div class="row cl" style="margin-bottom:15px;">
                <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>商品名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" name="productName" id="productName">
                </div>
            </div>
            <div class="row cl" style="margin-bottom:15px;">
                <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>商品颜色：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" name="productColor" id="productColor">
                </div>
            </div>
            <div class="row cl" style="margin-bottom:15px;">
                <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>生产厂家：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" name="productFactory"
                           id="productFactory">
                </div>
            </div>
        </form>

        <div class="row cl" style="margin-bottom:15px;">
            <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>数量：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="number" class="input-text" value="1" placeholder="" readonly id="productNumber"
                       style="width:100%">
            </div>
        </div>
        <div class="row cl" style="margin-bottom:15px;">
            <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>租售信息：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select id="rsInfo" class="select" onchange="showChoose(this)">
					<option value="0">请选择</option>
					<option value="10">出租</option>
					<option value="1">出售</option>
					<option value="11">租售</option>
				</select>
				</span>
            </div>
        </div>
        <div class="row cl" id="rpInfo" style="display: none;margin-bottom: 15px;">
            <label class="form-label col-xs-4 col-sm-1">租价：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="tel" id="rentPrice" placeholder="" class="input-text" style="width:90%"> 元/天
            </div>
        </div>
        <div class="row cl" id="spInfo" style="display: none; margin-bottom: 15px;">
            <label class="form-label col-xs-4 col-sm-1">售价：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" id="salePrice" placeholder="" class="input-text" style="width:90%"> 元
            </div>
        </div>
        <div class="row cl" id="money" style="display: none; margin-bottom: 15px;">
            <label class="form-label col-xs-4 col-sm-1">押金：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" id="rentMoney" placeholder="" class="input-text" style="width:90%"> 元
            </div>
        </div>
        <div class="row cl" style="margin-bottom:15px;">
            <label class="form-label col-xs-4 col-sm-1">生产日期：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="date" id="productDate" class="input-text Wdate"
                       onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})" style="width:180px;">
            </div>
        </div>
        <div class="row cl" style="margin-bottom:15px;">
            <label class="form-label col-xs-4 col-sm-1">商品摘要：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea id="introduction" class="textarea"
                          placeholder="说点什么...?"
                          datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！"
                          onKeyUp="$.Huitextarealength(this,200)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/20</p>
            </div>
        </div>
        <div class="row cl" style="margin-bottom:15px;">
            <label class="form-label col-xs-4 col-sm-1">图片上传：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <p>
                    <input type="file" id="choose-file" multiple="multiple"/>
                </p>
                <p>
                <ul class="file-list "></ul>
                </p>

            </div>
        </div>

    </div>
    <div style="float: left;padding-top: 100px">
        <div>
            <button onclick="build(this)" class="btn btn-primary radius">生成二维码</button>
        </div>
        <div id="code" style="padding-top: 10px">
        </div>
    </div>

    <div class="row cl">
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
            <button id="upload" href="javascript:;" class="btn btn-primary radius">&nbsp;&nbsp;提交&nbsp;&nbsp;
            </button>
            <button onclick="location.href = 'product-list.html'" class="btn btn-default radius" type="button">
                &nbsp;&nbsp;取消&nbsp;&nbsp;
            </button>
        </div>
    </div>
</div>
<script src="../../layer/layer.js"></script>
<script>
    /*生成二维码*/
    function build(obj) {
        var pType = document.getElementById("productType").value;
        var pName = document.getElementById("productName").value;
        var pColor = document.getElementById("productColor").value;
        if (pType == 0 || (pName == "" || pName == null) || (pColor == "" || pColor == null)) {
            alert("类型、名称、颜色不能为空!");
        } else {
            obj.disabled = true;
            document.getElementById("productQR").value = getNowFormatDate();
            var str = toUtf8(pType + "-" + pName + "-" + pColor + "-" + getNowFormatDate());//任意字符串
            //canvas方式或table方式
            $("#code").qrcode({
                render: "canvas",
                width: 100, //宽度
                height: 100, //高度
                text: str //任意内容
            });
            /*转换中文字符串*/
            function toUtf8(str) {
                var out, i, len, c;
                out = "";
                len = str.length;
                for (i = 0; i < len; i++) {
                    c = str.charCodeAt(i);
                    if ((c >= 0x0001) && (c <= 0x007F)) {
                        out += str.charAt(i);
                    } else if (c > 0x07FF) {
                        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                        out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    } else {
                        out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    }
                }
                return out;
            }
        }
    }

    /*10表示出租、1表示出售、11表示租售*/
    function showChoose(rsInfo) {
        var rpInfo = document.getElementById("rpInfo"); //出租
        var money = document.getElementById("money"); //押金
        var spInfo = document.getElementById("spInfo"); //出售
        rpInfo.style.display = (rsInfo.value == 10 || rsInfo.value == 11) ? "block" :
            "none";
        money.style.display = (rsInfo.value == 10 || rsInfo.value == 11) ? "block" :
            "none";
        spInfo.style.display = (rsInfo.value == 1 || rsInfo.value == 11) ? "block" :
            "none";
    }

    /*日期格式*/
    function getNowFormatDate() {
        var date = new Date();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var hours = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        if (hours >= 0 && hours <= 9) {
            hours = "0" + hours;
        }
        if (minute >= 0 && minute <= 9) {
            minute = "0" + minute;
        }
        if (second >= 0 && second <= 9) {
            second = "0" + second;
        }
        var currentdate = date.getFullYear() + month + strDate + hours + minute + second;
        return currentdate;
    }
</script>
<script>
    var upImg = "";
    $(function () {
        var $button = $('#upload'), //选择文件按钮
            $file = $("#choose-file"), //回显的列表
            $list = $('.file-list'), //选择要上传的所有文件
            fileList = [];//当前选择上传的文件
        var curFile;
        /* 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
        监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.*/
        $file.on('change', function (e) {
            // alert("123");
            //上传过图片后再次上传时限值数量
            var numold = $('li').length;
            if (numold >= 6) {
                layer.alert('最多上传6张图片');
                return;
            }
            //限制单次批量上传的数量
            var num = e.target.files.length;
            var numall = numold + num;
            if (num > 6) {
                layer.alert('最多上传6张图片');
                return;
            } else if (numall > 6) {
                layer.alert('最多上传6张图片');
                return;
            }
            //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
            curFile = this.files;
            //curFile = $file.get(0).files;
            //console.log(curFile);
            //将FileList对象变成数组
            fileList = fileList.concat(Array.from(curFile));
            //console.log(fileList);
            for (var i = 0, len = curFile.length; i < len; i++) {
                reviewFile(curFile[i])
            }
            $('.file-list').fadeIn(2500);
        });

        function reviewFile(file) {
            //实例化fileReader,
            var fd = new FileReader();
            //获取当前选择文件的类型
            var fileType = file.type;
            //调它的readAsDataURL并把原生File对象传给它，
            fd.readAsDataURL(file);//base64
            //监听它的onload事件，load完读取的结果就在它的result属性里了
            fd.onload = function () {
                if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
                    $list.append('<li style="border:solid red 0px; margin:5px 5px;" class="file-item"><img src="' + this.result + '" alt="" height="70"><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
                } else {
                    $list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del">删除</span></li>')
                }

            }
        }

        //点击删除按钮事件：
        $(".file-list").on('click', '.file-del', function () {
            let $parent = $(this).parent();
            console.log($parent);
            let index = $parent.index();
            fileList.splice(index, 1);
            $parent.fadeOut(850, function () {
                $parent.remove()
            });
            //$parent.remove()
        });
        //点击上传按钮事件：
        $button.on('click', function () {
            if ($("#productType").val() == 0) {
                alert("请选择商品类型！");
                return;
            }
            if (($("#productName").val() == "") || ($("#productName").val() == null)) {
                alert("商品名称不能为空！");
                return;
            }
            if (($("#productColor").val() == "") || ($("#productColor").val() == null)) {
                alert("商品颜色不能为空！");
                return;
            }
            if (($("#productQR").val() == "") || ($("#productQR").val() == null)) {
                alert("请先生成二维码！");
                return;
            }
            if (($("#productFactory").val() == "") || ($("#productFactory").val() == null)) {
                alert("生产厂家不能为空！");
                return;
            }
            if (($("#productDate").val() == "") || ($("#productDate").val() == null)) {
                alert("产品日期不能为空！");
                return;
            }
            if ($("#rsInfo").val() == '0') {
                alert("请选择租用类型！");//  return ;
            } else {
                var formData = new FormData();
                if (fileList.length > 6) {
                    layer.alert('最多允许上传6张图片');
                } else {
                    var file = fileList[0];
                    if (file) {
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = function (event) {
                            var imgBase64 = event.target.result;
                            upImg += imgBase64.split(',')[1];
                            // upImg = imgBase64;
                            // document.getElementById("result").innerHTML = txt;
                        };
                        //console.log(upImg);
                    }
                    for (var i = 0, len = fileList.length; i < len; i++) {
                        formData.append('upImg', fileList[i]);
                    }
                    formData.append('productQR', $("#productQR").val());
                    formData.append('productName', $("#productName").val());
                    formData.append('productNumber', $("#productNumber").val());
                    formData.append('productType', $("#productType").val());
                    formData.append('productColor', $("#productColor").val());
                    formData.append('productFactory', $("#productFactory").val());
                    formData.append('saleableInformation', $("#rsInfo").val());
                    formData.append('productDate', $("#productDate").val());
                    formData.append('salePrice', $("#salePrice").val());
                    formData.append('rentPrice', $("#rentPrice").val());
                    formData.append('rentMoney', $("#rentMoney").val());
                    formData.append('isBroken', "0");
                    formData.append('state', 0);
                    formData.append('introduction', $("#introduction").val());
                    formData.append('upImg', upImg);
                    $.ajax({
                        url: 'productInfo!upload',
                        type: 'post',
                        data: formData,
                        processData: false,
                        contentType: false, //缺失会出现URL编码，无法转成json对象
                        success: function (data) {
                            alert("添加成功！");
                            window.location.href = "product-list.html";
                        },
                        error: function (data) {
                            alert("添加失败！");
                            window.location.href = "product-list.html";
                        }
                    });
                }
            }
        });

    });


</script>
</body>
</html>